<!DOCTYPE html> 
<html>
<head>
<!-- Offline Storage Config -->
<html manifest="main.manifest">


<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1">

<!-- iPhone codes -->
<!-- For iPhone 4 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/h/apple-touch-icon.png">
<!-- For iPad 1-->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/m/apple-touch-icon.png">
<!-- For iPhone 3G, iPod Touch and Android -->
<link rel="apple-touch-icon-precomposed" href="img/l/apple-touch-icon-precomposed.png">
<!-- For Nokia -->
<link rel="shortcut icon" href="img/l/apple-touch-icon.png">
<!-- For everything else -->
<link rel="shortcut icon" href="/favicon.ico">

<!--iOS. Delete if not required -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-startup-image" href="img/splash.png">

<!--Microsoft. Delete if not required -->
<meta http-equiv="cleartype" content="on">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">


<!-- Fullcall -->
<link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.print.css' media='print' />

<!-- Jquery UI Theme-->
<link rel='stylesheet' type='text/css' href='pcp/jquery-ui-1.8.11.custom.css'/>

<!-- Jquery -->
<script type='text/javascript' src='jquery/jquery-1.5.min.js'></script>
<script type='text/javascript' src='jquery/jquery-ui-1.8.9.custom.min.js'></script>
<script type='text/javascript' src='fullcalendar/fullcalendar.min.js'></script>


<style type='text/css'>

	body {
		margin-top: 40px;
		text-align: center;
		font-size: 1em;
		line-height: 1.3em;
		font-family: Segoe UI, Arial, sans-serif;
	}
		
	#wrap {
		/*max-width: 1100px;
		min-width:800px;*/
		width:100%
		margin: 0 auto;
	}
	
	
	#calendar 
	{
		float: right;
		width:73%;
		/*position:relative;
		top:-1000px;*/
	}
		
	#external-events {
	float: left;
	width: 20%;
	/*position:relative;
	left:-40%;*/
	padding: 15px 2%;
	/* CSS3 Gradient */
	background: #519AC7; /* for non-css3 browsers */
	background: -webkit-gradient(linear, left top, left bottom, from(#519AC7), to(#2773b5)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #519AC7,  #2773b5); /* for firefox 3.6+ */
		border:1px solid #376384;
		color:#fff;

		text-shadow: 0 -1px 0 #3C789B;
		
	}
		
	#external-events h4 {

		margin: 0 0 2em 0;
		padding: 0;
		font-weight:normal;
		}
		
	#external-events p {
		margin: 1.5em 0;
		font-size: 11px;
		color: #666;
		}
		
	input.button {
		margin: 2em 0;
		vertical-align: middle;
		float:left;
		clear:both;
		background:#fefefe;
		cursor:pointer;
		border:1px solid #eee;
		padding:3px 5px;
		font-weight:bold;
		color:#3A75A3;
		font-size:0.9em;
		
		/* rounded corners */
		border-radius: 5px; /* CSS3 */
		-webkit-border-radius: 5px; /* Safari and chrome */
		-moz-border-radius: 5px; /* Firefox */
		-khtml-border-radius:5px; /* Linux browsers */
		
		}
		
	.external-event { /* try to mimick the look of a real event */
		margin:1em auto;
		padding: 5px 0px;
		background:#3A75A3;
		border:1px solid #376384;
		color:#fff;
		text-shadow: 0 1px 0 #3C789B;
		font-size: 1.1em;
		cursor: pointer;
						
		/* Transitions */
		-webkit-transition: all 0.2s ease-in;
		-moz-transition: all 0.2s ease-in;
		-o-transition: all 0.2s ease-in;
		
		/* rounded corners */
		border-radius: 10px; /* CSS3 */
		-webkit-border-radius: 10px; /* Safari and chrome */
		-moz-border-radius: 10px; /* Firefox */
		-khtml-border-radius:10px; /* Linux browsers */
		    /* Shadow */
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
	box-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
		
		}
		.external-event:hover	
		{
		background:#284C66;
		color:#eee;
		text-shadow: 0 1px 0 #1E3A4F;
		border:1px solid #1E3A4F;
		padding: 5px 0px;
		
		/* -webkit-transform: scale(1.05);
		-moz-transform: scale(1.05);
		-o-transform: scale(1.05);
		transform: scale(1.05);
		
		-webkit-transform-origin: 50% 50%;
		-moz-transform-origin: 50% 50%;
		-o-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
     -moz-transform: scale(1.1) rotate(3deg) translate(0px);
    -webkit-transform: scale(1.1) rotate(3deg) translate(0px);
    -o-transform: scale(1.1) rotate(3deg) translate(0px);
    transform: scale(1.1) rotate(3deg) translate(0px);
    
    -moz-transform: scale(0.9) rotate(5deg) translate(10px);
    -webkit-transform: scale(1.2) rotate(5deg) translate(10px);
    -o-transform: scale(1.2) rotate(5deg) translate(10px);
    transform: scale(1.2) rotate(30deg) translate(10px);*/
		}
		

	.eventClass{
		/*background-image:url(images/face.jpeg);*/
		height:115px;
	}
	
	
	#popup{
		position:absolute;
		width:400px;
		height:400px;
		background-color:#9C9;
		z-index:1000;
		display:none;
		text-align:left;
		padding:10px;	
	}
	
	/*------------------------------------ BUTTON STATES --------------------------------------*/
	
	.active	{
	background:#27B535!important;
	color:#fff!important;
cursor:move!important;	
	}
	.used	
	{
	/*border-color:#ccc!important;*/
	color:#B3CFE8!important;
	}
	
	.droppable	
	{
	border-color:#00ff00!important;
	background:#F0F9F1!important;
cursor:move!important;	
	}
	.droppable:hover
	{
	background:#ffffff!important;
	}
		
	.pending{
		color:#0C3;
		background-color:#9FC;	
	}
	
	.confirmed{
		color:#00F;	
		background-color:#9CC;
	}

</style>

<!--<script type='text/javascript'>
 $(document).ready(function(){
	$('#external-events').animate({left:'0px'},1000);
	$('#calendar').delay(400).animate({top:'0px'},1000);
	
 });
</script>-->
<!-- Start js -->

<script>
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelectorAll('meta[name="viewport"]')[0];
if (viewportmeta) {
viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
document.body.addEventListener('gesturestart', function() {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
}, false);
}
}
</script>
<script type='text/javascript'>
//database interaction=================================================================
	var db = null;
	 
	try {
		if (window.openDatabase) {
			db = openDatabase("SlotData", "1.0", "HTML5 Database - Slot Reservations", 200000);
			if (!db)
				alert("Failed to open the database on disk.  This is probably because the version was bad or there is not enough space left in this domain's quota");
		} else
			alert("Couldn't open the database.  Please try with a WebKit nightly with this feature enabled");
	} catch(err) {
		db = null;
		alert("Couldn't open the database.  Please try with a WebKit nightly with this feature enabled");
	}

	function saveNewSlotLocally (copiedEventObject)
    {
        //this.timestamp = new Date().getTime();
        var events = $('#calendar').fullCalendar('clientEvents')
        db.transaction(function (tx) 
        {
            tx.executeSql("INSERT INTO slots (title,start,end,status) VALUES (?, ?, ?, ?)", [copiedEventObject.title,copiedEventObject.start,copiedEventObject.end,copiedEventObject.status],function(result) {sendDataToCarista(copiedEventObject)});
        }); 
    }
	
	function sendDataToCarista(copiedEventObject)
	{
		var objJSON = {
		   "title" : copiedEventObject.title,
		   "start" : copiedEventObject.start,
		   "end" : copiedEventObject.end,
		   "status" : copiedEventObject.status
		 };
		//alert("SEND TO CARISTA: " + encodeURIComponent(JSON.stringify(objJSON)));
		var strJSON = encodeURIComponent(JSON.stringify(objJSON));
	   /* new Ajax.Request("ReceiveJSON.jsp",
	    {
			method: "post",
			parameters: "strJSON=" + strJSON,
			onComplete: Respond
	    });*/
	}
	
	function Respond(REQ)
	{
	//document.getElementById("ResponseDiv").innerHTML=REQ.responseText;
	}
	
	function deleteSlotsTable()
	{
		db.transaction(function(tx) {
			tx.executeSql("DROP TABLE slots", [],function(tx, result){loaded()})});
	}
	
	function getExistingSlots()
	{
		db.transaction(function(tx) {
			tx.executeSql("SELECT * FROM slots", [], function(tx, result) {
				var events = $('#calendar').fullCalendar('clientEvents');
				var slotEvents = new Array();
				for (var i = 0; i < result.rows.length; ++i) {
					var row = result.rows.item(i);
					var slot = {
								title  : row['title'],
								start  : row['start'],
								end  : row['end'],
								className : 'eventClass',
								textColor:'#000',
								allDay : false,
								status : row['status'],
								backgroundColor: 'transparent'}
					if(slot['status']=='pending') slot['status']='confirmed';//For TESTING!!!!!!!!!!!!!!
					slotEvents.push(slot);
					
				}
				$('#calendar').fullCalendar( 'addEventSource', slotEvents );
	 		
			}, function(tx, error) {
				alert('Failed to retrieve slots from database - ' + error.message);
			});
   		});
	}
	
	
	
	
	function loaded()
	{
		//alert(navigator.onLine)
		db.transaction(function(tx) {
			tx.executeSql("SELECT COUNT(*) FROM slots", [], function(result) {
			//alert('already there');
			getExistingSlots();	
			}, function(tx, error) {
				tx.executeSql("CREATE TABLE slots (id  INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, title TEXT, start TEXT, end TEXT, status TEXT)", [], function(result) { 
					//alert('table created');
					$('#calendar').fullCalendar( 'removeEvents' );
				});
			});
		});
	}
	
	if (db != null)
    //addEventListener('load', deleteSlotsTable, false);
	addEventListener('load', loaded, false);
		
	
	
<!--=====END OF DB STUFF===============================================================================-->	
	
	var selectedItem = null;
	var selectedEventObject = null;
	var selectedDiv = null;
	

	$(document).ready(function() {
		
	
		/* initialize the external events
		-----------------------------------------------------------------*/
	
		$('#external-events div.external-event').each(function() {
			
			var objID = $(this).attr('id');
			objID = objID.substr(1,1);
			// create an Event Object
			// it doesn't need to have a start or end
			var eventObject = {
				title: $.trim($(this).text()),
				//id: objID,
				//data: objID, // use the element's text as the event title
				backgroundColor: 'transparent',
				borderColor: 'transparent',
				textColor:'#000'
			};
			
			
			// store the Event Object in the DOM element so we can get to it later
			$(this).data('eventObject', eventObject);
			
			$(this).click(function() {
			  selectedItem = true;
			  selectedEventObject = $(this).data('eventObject');
			  selectedDiv = this;
			  //alert(selectedEventObject.title);
			  //higlights selected button from left
			  $(this).addClass('active')
			  //highlights the calander days 
			  $('.ui-widget-content').addClass('droppable')
			  
			});
			
		});
	
	
		/* initialize the calendar
		-----------------------------------------------------------------*/
		
		$('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			
			theme:true,
			editable: true,
			//droppable: true,  this allows things to be dropped onto the calendar !!!
			eventRender: function(event, element) {
				var start = event.start.toString();
				start = start.substr(16,8);
				var end = event.end.toString();
				end = end.substr(16,8);
				element.html("<p>"+start+"</p><p class='"+ event.status +"'><img src='images/face.jpeg' width='35' style='float:right' />"+event.title+"<br/>"+event.status+"</p><p>"+end+"</p>");
			},
			
			eventClick: function(calEvent, jsEvent, view) {
				$('#popup').css('display', 'block');
				$('#popup').html("<input value='save and close' type='button' name='close' id='close' onclick=\"document.getElementById('popup').style.display='none'\"/>");
				var htmlStr = "<h2>Edit "+calEvent.title+"</h2>";
				htmlStr += "<p>Start "+calEvent.start+"</p>";
				htmlStr += "<p>Status "+calEvent.status+"</p>";
				htmlStr += "<p>End "+calEvent.end+"</p>"+$('#popup').html();
				$('#popup').html(htmlStr);
				
				//alert('Event: ' + calEvent.title + ' Scheduled to commence: ' + calEvent.start + ' and finish: ' + calEvent.end );
				//$(this).css('background-color', '#00ff00').add('<img src='+draggableObjects[calEvent.data].imgSrc+'/>');
		
			},
			
			dayClick: function(date, allDay, jsEvent, view) {
			$('.external-event').removeClass('active');
			$('.ui-widget-content').removeClass('droppable');
			$('.ui-widget-content').css('border-color', '#A6C9E2')
			$('.ui-widget-content').css('background-color', '#ffffff')
				if(selectedItem)
				{
					//var allDay = confirm('All day slot?');
					var copiedEventObject = $.extend({}, selectedEventObject);
					
					// assign it the date that was reported
					var dateStartStr=date.toString().substr(0,16);
					var dateEndStr=date.toString().substr(24,date.toString().length-1);
					//var startTime = prompt('Start time:','09:00:00');
					//var endTime = prompt('End time:','17:00:00');
					var startTime = '09:00:00';
					var endTime = '17:00:00';
					copiedEventObject.start = dateStartStr+startTime+dateEndStr;
					copiedEventObject.end = dateStartStr+endTime+dateEndStr;
					copiedEventObject.allDay = false;
					copiedEventObject.className = 'eventClass';
					copiedEventObject.status = 'pending';
					// render the event on the calendar
					$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
					$(selectedDiv).addClass('used');
					
					saveNewSlotLocally(copiedEventObject);
					selectedItem = null;
					selectedEventObject = null;
					selectedDiv = null
				}
		
		
			},
			
			
			
		});
		
		
	});

</script>

</head>
<body>

	<div id="wrap">
		<div id="external-events">
		<h4>Click on a worker to select. Then click on a date to place a slot on the calendar associated with the worker.</h4>
		<div class="external-event" id="s0">Elaine Smith</div>
		<div class="external-event" id="s1">Freddy Smedley</div>
		<div class="external-event" id="s2">Ron Atkinson</div>
		<div class="external-event" id="s3">Kenneth Dalglish</div>
		<div class="external-event" id="s4">Fabio Capello</div>
		<input value="clear database" class="button" type="button" name="delete" id="delete" onclick="deleteSlotsTable()"/>
		</div>

		<div id="calendar"></div>

		<div id="popup">
			<input value="save and close" type="button" name="close" id="close" onclick="document.getElementById('popup').style.display='none'"/>
		</div>
		<div style="clear:both"></div>
	</div>

</body>
</html>
